<!--公共部分-->

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="padding:0;margin: 0">
  <div >
    <el-row :gutter="10" style="margin: 0;">
      <el-col :span="1" :offset="6" style="margin-top: 10px;margin-right: 10px"><img src="avatar.png" ></el-col>
      <el-col :span="3">
        <span style="display: block; font-size: 20px;margin-top: 20px;position: relative;right: auto;color:#8ab8fa;font-weight: bold;"><b>鹿鹿商城</b></span>
      </el-col>
      <el-col :span="8"><span style="display: block;margin-top: 20px;">首页&nbsp;|&nbsp;热点咨询&nbsp;|&nbsp;商家入驻&nbsp;|&nbsp;社会招聘&nbsp;|&nbsp;校园招聘&nbsp;|&nbsp;帮助中心</span></el-col>
      <el-col :span="2">
        <el-dropdown style="margin-top: 15px;margin-left: 100px;">
          <el-button>
            <el-icon><User /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
<!--              禁用功能暂未实现-->
              <el-dropdown-item><el-button type="primary" >后台管理页面</el-button></el-dropdown-item>
              <el-dropdown-item><el-button type="danger" @click="logout">退出登录页面</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-menu mode="horizontal" background-color="#0aa1ed" text-color="#fff"
             default-active="1" active-text-color="#ff0" style="position: relative;" router>
      <el-menu-item index="/user" style="margin: 0 20px 0 100px;"  >精品推荐</el-menu-item>
      <el-menu-item index="/man" style="margin: 0 20px;" >服装</el-menu-item>
      <el-menu-item index="/medicine" style="margin: 0 20px;" >医药</el-menu-item>
      <el-menu-item index="/electronic" style="margin: 0 20px;" >电子产品</el-menu-item>
      <el-menu-item index="/vegetable" style="margin: 0 20px;" >果蔬食品</el-menu-item>
      <el-input
          v-model="input2"
          style="width: 200px;height: 30px; margin-top: 15px;position: absolute;right: 150px;"
          placeholder="请输入商品信息"
          :suffix-icon="Search"

          @keydown.enter="loadUser"
      />
    </el-menu>

  </div>
      </el-header >
      <el-main style="padding:20px 0;overflow: hidden; margin-top: 68px">
        <router-view/>
      </el-main>
      <el-footer
          style="background-color: #282c30;color:#666;height: 180px;padding-top: 20px;">
        <p style="text-align: center;">Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p style="text-align: center;">涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
        <p style="text-align: center;">达外在线WWW.TMOOCOUT.CN 专注于IT职业技能培训</p>
      </el-footer>
    </el-container>

  </div>



</template>
<script setup>
import {ref} from "vue";
import { Search } from '@element-plus/icons-vue'
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const searchUserFrom = ref({username:""});
const loadUser = ()=>{
  let data = qs.stringify(searchUserFrom.value);
  axios.get(BASE_URL+'/user/select?'+data).then((response)=>{
    if (response.data.code==2000){
      input2.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}


//用户
const input2 = ref({
  id: 1,title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
{
  id:2,title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
    price: 233,
    oldPrice: 598,
    url: "/imgs/b.jpg",
    saleCount: 2342
},
{id:3,
    title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季",
    price: 233,
    oldPrice: 598,
    url: "/imgs/c.jpg",
    saleCount: 2342
},
{id:4,
    title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚",
    price: 233,
    oldPrice: 598,
    url: "/imgs/d.jpg",
    saleCount: 2342
},
{id:5,
    title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花",
    price: 233,
    oldPrice: 598,
    url: "/imgs/e.jpg",
    saleCount: 2342
},
{id:6,
    title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领",
    price: 233,
    oldPrice: 598,
    url: "/imgs/f.jpg",
    saleCount: 2342
},
{id:7,
    title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",
    price: 233,
    oldPrice: 598,
    url: "/imgs/g.jpg",
    saleCount: 2342
},
{id:8,title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
{id:9,
    title: "imone2021秋款黑色小西装外套女韩版学生宽松学",
    price: 233,
    oldPrice: 598,
    url: "/imgs/i.jpg",
    saleCount: 2342
},
{id:10,
    title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫",
    price: 233,
    oldPrice: 598,
    url: "/imgs/j.jpg",
    saleCount: 2342
},
{id:11,
    title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修",
    price: 233,
    oldPrice: 598,
    url: "/imgs/k.jpg",
    saleCount: 2342
},
{id:12,
    title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色",
    price: 233,
    oldPrice: 598,
    url: "/imgs/l.jpg",
    saleCount: 2342
},
{id: 13,title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
{
  id:14,title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
    price: 233,
    oldPrice: 598,
    url: "/imgs/b.jpg",
    saleCount: 2342
},
{id:15,
    title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季",
    price: 233,
    oldPrice: 598,
    url: "/imgs/c.jpg",
    saleCount: 2342
},
{id:16,
    title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚",
    price: 233,
    oldPrice: 598,
    url: "/imgs/d.jpg",
    saleCount: 2342
},
{id:17,
    title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花",
    price: 233,
    oldPrice: 598,
    url: "/imgs/e.jpg",
    saleCount: 2342
},
{id:18,
    title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领",
    price: 233,
    oldPrice: 598,
    url: "/imgs/f.jpg",
    saleCount: 2342
},
{id:19,
    title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",
    price: 233,
    oldPrice: 598,
    url: "/imgs/g.jpg",
    saleCount: 2342
},
{id:20,title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
{id:21,
    title: "imone2021秋款黑色小西装外套女韩版学生宽松学",
    price: 233,
    oldPrice: 598,
    url: "/imgs/i.jpg",
    saleCount: 2342
},
{id:22,
    title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫",
    price: 233,
    oldPrice: 598,
    url: "/imgs/j.jpg",
    saleCount: 2342
},
{id:23,
    title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修",
    price: 233,
    oldPrice: 598,
    url: "/imgs/k.jpg",
    saleCount: 2342
},
{id:24,
    title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色",
    price: 233,
    oldPrice: 598,
    url: "/imgs/l.jpg",
    saleCount: 2342
});

//退出登录
const logout = ()=>{
  if(confirm('您确认要退出登录吗?')){
    //退出时要:清空本地存储+跳转至登录页+清除已取出的用户数据
    localStorage.removeItem('user');
    window.location.href = '/login';
  }
}

/* window对象是浏览器内置的全局对象,代表了当前浏览器窗口 */
window.addEventListener('resize',function (){
  //alert('窗口大小被改变了!');
})

//假方法
// const push = ()=>{
//   if (level==10){
//     false;
//   }else {
//     true;
//   }
// }
</script>
